<template>
    <div>
        <div class="container">
            <mt-header title="我的收藏">
                <router-link to="/" slot="left">
                    <mt-button icon="back"></mt-button>
                </router-link>
            </mt-header>
            <div v-if="hasCollect" class="big">
                <div class="body" v-for="(item, index) in list" :key="index">
                    <img class="img" :src='baseUrl + item.cover' alt="">
                    <div class="loc" style="font-size: 10px;">
                        {{ item.location }}
                    </div>
                    <div class="name" style="font-size: 12px ; font-weight:600">
                        {{ item.title }}
                    </div>
                    <div class="info">
                        {{ item.bathrommNum }}
                    </div>
                    <div class="price">
                        ${{ item.price }}
                    </div>
                    <div class="love">

                    </div>
                </div>
            </div>


            <div v-else="!hasCollect">
            
                ...暂无数据    
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            list: [],
            baseUrl: this.getBaseUrl(),
            hasCollect:false
        }
    },
    methods: {
        getCollectList() {
            console.log(this.baseUrl);
            this.$axios({
                url: this.$api.collectList,
                method: 'get',
                Headers: { Authorization: 'Bearer' + this.$store.state.token }
            }).then(res => {
                this.list = res.rows
                if(res.rows.length >= 1){
                    this.hasCollect = true
                    console.log(this.hasCollect);
                }else{
                    this.hasCollect = false
                    console.log(this.hasCollect);
                }
            })
        }
    },
    mounted() {
        this.getCollectList()
    }

}
</script>
<style lang="scss" scoped>
.container {
    padding: 10px;

}
.big{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.body {
    width: 50%;
    align-items: center;
    margin-bottom: 10px;
    border: 1px blanchedalmond solid;
    background-color: #fff;
}

.img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    margin-right: 10px;
}

.name {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 5px;
}

.loc {
    font-size: 10px;
    margin-bottom: 5px;
}

.info {
    font-size: 10px;
    margin-right: 10px;
}

.price {
    font-size: 12px;
    color: #f00;
    font-weight: 600;
}

</style>